<template>
	<u-popup v-model="value" mode="center" :mask-close-able="false">
		<view class="promote" v-if="value">
			<view class="promote-wrapper" :style="translateX">
				<view class="promote-inner" :style="translateY">
					<form-card @close="handleClosePopup" @jump="switchStatus = true" @change="handleOpenQRcode"></form-card>
					<qrcode-card class="qrcode-card" :src="qrcodeUrl" :time="qrcodeTime" @time-end="handleCloseQRCode" :style="opacity"></qrcode-card>
				</view>
				<view class="promote-inner">
					<list-card @close="handleClosePopup" @back="switchStatus = false"></list-card>
				</view>
			</view>
			<canvas type="2d" canvas-id="canvas" id="canvas" style="position: absolute; top: -100%; visibility: hidden; pointer-events: none;"></canvas>
		</view>
	</u-popup>
</template>

<script>
import FormCard from '@/pages/components/personal/form-card.vue';
import ListCard from '@/pages/components/personal/list-card.vue';
import QrcodeCard from '@/pages/components/personal/qrcode-card.vue';

export default {
	name: 'Promote',
	props:{
		value:{
			type:Boolean,
			default:false
		}
	},
	model:{
		prop:'value',
		event:'input'
	},
	data() {
		return {
			qrcodeTime: 0, // 倒计时
			qrcodeUrl: '', // 私人二维码
			qrcodeShow: false, // 二维码显示
			switchStatus: false, // 切换状态
		};
	},
	computed: {
		translateX() {
			return this.switchStatus ? 'transform: translateX(-700rpx);' : 'transform: translateX(0rpx);';
		},
		translateY() {
			return this.qrcodeShow ? 'transform: translateY(0rpx);' : 'transform: translateY(265rpx);';
		},
		opacity() {
			return this.qrcodeShow ? 'opacity: 1;' : 'opacity: 0; pointer-events: none;';
		}
	},
	methods: {
		/**
		 * 打开二维码卡片，开始计时
		 */
		async handleOpenQRcode(src) {
			await this.prepareLoadImage(src);
			this.qrcodeUrl = src;
			this.qrcodeShow = true;
			this.qrcodeTime = 120;
		},
		/**
		 * 计时结束，关闭二维码卡片
		 */
		handleCloseQRCode() {
			this.qrcodeShow = false
		},
		/**
		 * 预加载二维码图片
		 */
		prepareLoadImage(src) {
			return new Promise((resolve, reject) => {
				uni.createSelectorQuery()
					.in(this)
					.select('#canvas')
					.node(res => {
						const image = res.node.createImage();
						image.onload = () => resolve(image);
						image.onerror = e => reject(e.message);
						image.src = src;
					})
					.exec();
			});
		},
		/**
		 * 关闭弹窗,重置所有状态
		 */
		handleClosePopup(){
			this.qrcodeShow = false
			this.switchStatus = false 
			this.qrcodeTime = 0
			this.qrcodeUrl = ''
			this.$emit('input',false)
		}
	},
	components: {
		FormCard,
		ListCard,
		QrcodeCard
	}
};
</script>

<style lang="scss">
.promote {
	width: 650rpx;
	overflow: hidden;
}

.promote-wrapper {
	display: flex;
	flex-wrap: nowrap;
	transition: 0.3s;
}

.promote-inner {
	width: 650rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: 0.5s;
	& + & {
		margin-left: 50rpx;
	}
}
.qrcode-card{
	transition: 0.5s;
}
</style>
